<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            #box {
                padding: 20px;
                border: 20px solid yellow;
                margin: 5px;
            }

        </style>
    </head>
    <body>
        <div id="box"></div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <button id="scroll">滚动</button>
        
        <div id="wrap">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>
<script src="jquery.min.js"></script>
<script>
    
    // $('#box')
    //     .css('width', 200)
    //     .css('height', 200)
    //     .css('background', 'red');

    $('#box').css({
        width: 200,
        height: 200,
        background: "blue"
    });

    $('ul>li')
        .css({
            height: 35,
            width: function(i, oldVal) {
                // console.log(index, oldVal);
                return 100 + 50 * i;
            },
            background: 'red',
            // 'margin-bottom': '10px'
            marginBottom: 10
        })
        .css('background', function(i) {
            return i % 2 == 0 ? 'red' : 'yellow';
        });

    // console.log($('#box').offset().top);

    // $('#box').offset({
    //     left: 100,
    //     top: 100
    // });

    // console.log($('#box').position().left, $('#box').position().top);

    
    $('#scroll').click(function() {

        // console.log($(':root').scrollTop());
        $(':root').scrollTop(200);

    });

    // console.log($('#box').height());
    // $('#box').height(30);

    $('#wrap>div')
        .css('height', 35)
        .css('border', '2px solid black')
        .width(function(i) {
            return 100 + i * 50;
        });

    console.log($('#box').innerHeight(), $('#box').innerWidth());
    console.log($('#box').outerWidth(true), $('#box').outerHeight());



</script>